<template>
	<!-- 页面已弃用 转到：/pagec/product/product -->
	<view class="window-top">
		<view class="window-flex">
			<view class="window-box">
				<scroll-view class="window-scroll" scroll-y>
					<view v-if="puctData" class="malltHeadBatten" style="width: 100%;height: 100%;">

						<!-- 顶部占位 
						<view :style="'height:'+sConf.tH+'px;'"> </view>-->
						<!-- 上方商品特写 -->
						<tn-swiper v-model="curSwiperIndex" :data="puctData.banner" width="100%" height="60vh" autoplay>
							<template #default="{ data }">
								<view style="width: 100%;height: 100%;">
									<image :src="sConf.pics + data" mode="aspectFit"
										style="width: 100%;height: 100%;border-radius: inherit;background-color: black;">
									</image>
								</view>
							</template>
						</tn-swiper>

						<!-- 正文 -->
						<view style="padding: 5px;">
							<!-- 标题区域 -->
							<view class="">
								<!-- 产品名称 -->
								<view style="font-weight: bolder;font-size: larger; padding: 5px;">
									{{ puctData.jingle.title }}
								</view>
								<!-- 广告词 -->
								<view style="padding: 5px;color: #aaa;">{{ puctData.jingle.jingle }}</view>
								<!-- 产品标签 -->
								<view style="padding: 5px; display: flex;gap: 10px;">
									<!--
									<tn-icon v-if="puctData.is_share === 1" name="fire" color="#ff9a44"
										size="40"></tn-icon>
									<tn-icon v-if="puctData.is_master === 1" name="lucky-money" color="#ff6b6b"
										size="40"></tn-icon>
									<tn-icon v-if="puctData.exp > 0" name="flower" color="#96c93d" size="40"></tn-icon>
									<tn-icon v-if="puctData.point > 0" name="funds" color="#01beff" size="40"></tn-icon>

									
									<tn-tag v-if="puctData.is_master === 1" type="info" shape="round" font-size="24"
										bg-color="#ff9a44" text-color="#fff">Rep</tn-tag>
									<tn-tag v-if="puctData.is_share === 1" type="info" shape="round" font-size="24"
										bg-color="#ff6b6b" text-color="#fff">Hot</tn-tag>
									<tn-tag v-if="puctData.exp > 0" type="info" shape="round" font-size="24"
										bg-color="#01beff" text-color="#fff">Exp</tn-tag>
									<tn-tag v-if="puctData.point > 0" type="info" shape="round" font-size="24"
										bg-color="#96c93d" text-color="#fff">积分</tn-tag>
									-->
									<tn-tag v-for="(tag, index) in puctData.tag" :key="index" type="info" shape="round"
										font-size="24" :bg-color="tag.bgcolor"
										:text-color="tag.color">{{ tag.name }}</tn-tag>
								</view>
							</view>

							<!-- 当前价格 -->
							<view style="padding: 5px;display: flex; background-color: #fff2f2;border-radius: 10px;">
								<view style="display: flex;flex-direction: column;">
									<view v-if="puctData.is_money == 1"
										style="display: flex;align-items: center;gap: 20px;">
										<view
											style="padding-left: 5px;color: #888;display: flex;align-items: center;">
											<tn-icon name="money" size="40" color="#888"></tn-icon>
											<view class="buy-price" style="font-size: larger;">
												{{ (puctData.price.money / 100).toFixed(2) }}
											</view>
										</view>
										<view
											style="color: #fff;background-color: #ff6b6b;display: flex;align-items: center;padding: 5px 10px;border-radius: 20px;">
											<view>会员价￥</view>
											<view class="buy-price" style="font-size: larger;">
												{{ (puctData.price.price / 100).toFixed(2) }}
											</view>
										</view>
									</view>
									<view style="font-size: smaller;display: flex;color: #ff6b6b;gap: 10px;">
										<view></view>
										<view></view>
									</view>
								</view>
							</view>

							<!-- 分段器 -->
							<view style="padding: 5; background-color: #fff;border-radius: 10px;margin-top: 10px;">
								<tn-subsection v-model="selfSubsection" mode="button">
									<tn-subsection-item title="详情"></tn-subsection-item>
									<tn-subsection-item title="参数"></tn-subsection-item>
									<tn-subsection-item title="评论"></tn-subsection-item>
								</tn-subsection>
								<view v-if="selfSubsection === 0" style="padding: 10px;">
									<tn-read-more :height="150" expand-text="查看更多"><rich-text
											:nodes="puctData.jingle.content"></rich-text></tn-read-more>
								</view>
								<view v-if="selfSubsection === 1" style="padding: 10px;">
									<tn-list-item v-if="puctData.args.length === 0">
										<tn-empty mode="data"></tn-empty>
									</tn-list-item>
									<tn-list-item v-for="(args, index) in puctData.args" :key="index" height="28px">
										{{ args.name }}: {{ args.value }}
									</tn-list-item>
								</view>
								<view v-if="selfSubsection === 2" style="padding: 10px;">
									<tn-list-item v-if="puctData.comment.length === 0">
										<tn-empty mode="comment"></tn-empty>
									</tn-list-item>
									<tn-list-item v-for="(args, index) in puctData.comment" :key="index">
										<view style="display: flex;flex-direction: column;">
											<view style="display: flex;justify-content: space-between;">
												<view class="">
													{{ args.name }}
												</view>
												<view class="">
													<tn-rate v-model="args.rate" allow-half readonly :min="0"
														:max="5"></tn-rate>
												</view>
											</view>
											<view style="padding: 10px;">
												{{ args.value }}
											</view>
										</view>
									</tn-list-item>
								</view>
							</view>

							<!-- 详图懒加载 -->
							<view style="padding: 10px 0;">
								<image v-for="url in puctData.info" :key="url" :src="sConf.pics + url"
									mode="widthFix" />
							</view>
							<!-- 顶部自定义导航 -->
							<tn-navbar :placeholder="true" fixed bg-color="#FFFFFF00" text-color="#fff"> {{ title }}
							</tn-navbar>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 商品导航 -->
		<view class="goods-carts" style="padding: 10px 0; background-color: #fff;">
			<uni-goods-nav style="width: 100%;display: block;" :fill="true" :options="navOptions"
				:button-group="navGroup" @click="navOnClick" @buttonClick="navButtonClick"></uni-goods-nav>
		</view>

		<!-- 悬浮按钮 
		<uni-fab ref="fab" style="margin-top: 100px;" :pattern="pattern" :content="content" :horizontal="horizontal"
			:vertical="vertical" :direction="direction" @trigger="trigger" @fabClick="fabClick" />
		-->
	</view>

	<!-- 直接下单 -->
	<tn-popup v-model="purch" open-direction="bottom">
		<view class="tn-p-lg" style="background-color: #f1f1f1;padding: 10px;">
			<view style="display: flex;gap: 10px;">
				<image :src="sConf.pics + (puctData?.cover ?? [])[0]?.url" mode="aspectFill"
					style="width: 64px;height: 64px;border-radius: 10px;"></image>
				<view style="display: flex;flex-direction: column;justify-content: space-between;">
					<view style="font-weight: bolder;"> {{ puctData?.jingle.title }} </view>
					<view style="color: #aaa;font-size: smaller;">{{ puctData?.jingle.jingle }}</view>
					<view style="color: #dd524d;font-size: smaller;display: flex;align-items: center;">
						<text>实付价 ￥</text>
						<view class="buy-price">{{ (puctData?.price.money / 100).toFixed(2) }} </view>
					</view>
				</view>
			</view>
			<!-- 收货地址 -->
			<view
				style="padding: 20px 10px;border-radius: 10px;display: flex;justify-content:space-between;background-color: #fff;margin-top:10px;"
				:class="warn ? 'warn-address' : ''" @tap="addressChange">
				<view style="font-weight: bold;"> 地址 </view>
				<view v-if="curAddress">
					<view> {{ zipStr(curAddress?.name) }} {{ zipStr(curAddress?.phone) }}</view>
					<view>{{ curAddress?.sheng }} {{ curAddress?.shi }} {{ curAddress?.xian }}
						{{ curAddress?.zhen }}
					</view>
					<view> {{ curAddress?.address }}</view>
				</view>
				<view v-else>
					<text style="color: #aaa;">请选择收货地址</text>
				</view>
			</view>

			<view style="border-radius: 10px;background-color: #fff;margin-top:10px;">
				<!-- 颜色 -->
				<view v-if="false" style="padding: 20px 10px;">
					<view style="font-weight: bold;"> 颜色 </view>
					<tn-empty mode="data"></tn-empty>
				</view>
				<!-- 规格 -->
				<view v-if="false" style="padding: 20px 10px;">
					<view style="font-weight: bold;"> 规格 </view>
					<tn-empty mode="data"></tn-empty>
				</view>
				<!-- 数量 -->
				<view style="padding: 20px 10px;display: flex;justify-content: space-between;">
					<view style="font-weight: bold;"> 数量 </view>
					<view class="">
						<text style="color: #aaa;">限购{{ puctData?.cur_num }}件 </text>
						<tn-number-box v-model="curPayCount" :min="1" :max="puctData?.cur_num" input-disabled
							@change="countChange"></tn-number-box>
					</view>
				</view>
				<!-- 备注 -->
				<view style="padding: 20px 10px;display: flex;justify-content: space-between;">
					<view style="font-weight: bold;"> 备注 </view>
					<view style="color: #aaa;" @click="showNodeBlock">{{ nodeData ?? '无备注' }} ></view>
				</view>
			</view>
			<!-- 支付板块 -->
			<view style="border-radius: 10px;background-color: #fff;margin-top:10px;">
				<tn-radio-group v-model="selectPay" style="width: 100%;">
					<view style="width: 100%;padding: 10px 10px;display: flex;flex-direction: column;">
						<view
							style="display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 20px 0;">
							<view style="display: flex;align-items: center;gap: 5px;">
								<tn-icon name="payment-wechat" color="#48AC35" size="64"></tn-icon>
								<text>微信支付</text>
							</view>
							<view class="">
								<tn-radio label="wxpay"></tn-radio>
							</view>
						</view>
						<view
							style="display: flex;justify-content: space-between;align-items: center;width: 100%;padding: 10px 0;">
							<view style="display: flex;align-items: center;gap: 5px;">
								<tn-icon name="payment-alipay" color="#469AE4" size="64"></tn-icon>
								<text>支付宝</text>
							</view>
							<view class="">
								<tn-radio label="zhifubao" disabled></tn-radio>
							</view>
						</view>
					</view>
				</tn-radio-group>
			</view>
			<!-- 支付按钮 -->
			<view class="toSubmitReqsn"
				style="border-radius: 10px;margin-top:10px;padding: 10px;display: flex;justify-content: center;color: #fff;"
				@click="reqsnChange">
				<view class="">
					支付金额 ￥{{ (curPayMoney / 100).toFixed(2) }}
				</view>
			</view>
			<!-- 选择收货地址 -->
			<tn-action-sheet ref="actionSheetRef"></tn-action-sheet>
			<!-- 填写备注 -->
			<tn-popup v-model="showNode" open-direction="bottom">
				<view class="tn-p-lg" style="background-color: #fff;padding: 10px;">
					<view style="font-weight: bold;"> 备注 </view>
					<textarea :value="nodeData ?? ''" placeholder-style="color:#aaa" maxlength="255"
						@input="conformNode" placeholder="选填,建议先与商家协商一致"
						style="background-color: #f1f1f1;width: 100%;height: 20vh;padding: 10px;border-radius: 10px;margin-top: 10px;"></textarea>
					<view class="toSubmitReqsn"
						style="border-radius: 10px;margin-top:10px;padding: 10px;display: flex;justify-content: center;color: #fff;"
						@click="showNodeBlock">
						<view class=""> 提交 </view>
					</view>
				</view>
			</tn-popup>
		</view>
	</tn-popup>

	<!-- 悬浮按钮 
	<tn-suspend-button icon="logo-tuniao" />
	-->

</template>

<script>
import utils from '@/common/utils';
export default {
	data() {
		return {
			topH: 0,
			title: '悦君玺 • 重庆',
			sConf: getApp().globalData,
			navOptions: [{
				icon: 'shop',
				text: '店铺'
			}, {
				icon: 'chat',
				text: '客服'
			}, {
				icon: 'heart',
				text: '收藏'
			}, {
				icon: 'cart',
				text: '购物车'
			}],
			navGroup: [{
				text: '加入购物车',
				backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
				color: '#fff'
			},
			{
				text: '立即购买',
				backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
				color: '#fff'
			}
			],
			puctData: null, // 产品对象	
			curSwiperIndex: null, // 当前特写
			curTapMoney: 0, // 原价
			curPayMoney: 0, // 支付金额
			curPayCount: 1,
			curCollapseArgs: -1,
			curCollapseComment: -1,
			curAddress: null,
			warn: false,
			purch: false,
			showNode: false,
			nodeData: null,
			selectPay: 'wxpay',
			staffData: null, // 个人信息
			selfSubsection: 0, // 分段器索引
			// 悬浮按钮
			horizontal: 'right',
			vertical: 'top',
			direction: 'horizontal',
			pattern: {
				color: '#7A7E83',
				backgroundColor: '#fff',
				selectedColor: '#007AFF',
				buttonColor: '#007AFF',
				iconColor: '#fff'
			},
			content: [{
				iconPath: '/static/image.png',
				selectedIconPath: '/static/image-active.png',
				text: '相册',
				active: false
			},
			{
				iconPath: '/static/home.png',
				selectedIconPath: '/static/home-active.png',
				text: '首页',
				active: false
			},
			{
				iconPath: '/static/star.png',
				selectedIconPath: '/static/star-active.png',
				text: '收藏',
				active: false
			}
			]

		}
	},
	onLoad(options) {
		const puct = Number(options.puct || 0)
		uni.redirectTo({
			url: '/pagec/product/product?gid=' + puct
		});
		console.log('onLoad', puct);
		this.loadProductData(puct)
		this.loadUserinfoData(this.sConf.auth.id)
	},
	onReady() {

	},
	methods: {
		zipStr(e) {
			return utils.zipStr(e)
		},
		navOnClick(e) {
			console.log('navOnClick', e);
			if (e.index === 0) {
				// // #ifdef MP-WEIXIN
				// wx.vibrateShort();
				// // #endif
				// uni.showToast({
				// 	icon: 'error',
				// 	title: '尚未开放'
				// });
				uni.navigateTo({
					url: '/pageb/shoped/shoped?pid=' + this.puctData.pid
				})
			}
			if (e.index === 1) {
				// #ifdef MP-WEIXIN
				wx.vibrateShort();
				// #endif
				uni.showToast({
					icon: 'error',
					title: '尚未开放'
				});
			}
			if (e.index === 2) {
				this.favorChange()
			}
			if (e.index == 3) {
				uni.navigateTo({
					url: '/pageb/puctcart/puctcart'
				});
			}
		},
		navButtonClick(e) {
			console.log('navButtonClick');
			if (e.index === 0) {
				this.byCart()
			}
			if (e.index === 1) {
				this.loadStaffAddress()
				this.purch = !this.purch
			}
		},
		showNodeBlock() {
			this.showNode = !this.showNode
		},
		conformNode(e) {
			this.nodeData = e.detail.value
		},
		/**
		 * 加载个人信息
		 */
		loadUserinfoData(e) {
			let host = this.sConf.host + '/weapps/userinfo/' + e + '/';
			let token = this.sConf.token || '';
			utils.authenticatorRead(host, token).then((res) => {
				console.log('加载个人信息', res);
				if (res.rescode === 200) {
					this.staffData = res.resmsg
				}
			})
		},
		/**
		 * 加载商品
		 * @param {Object} e
		 */
		loadProductData(e) {
			console.log('loadProductData', e);
			let host = this.sConf.host + '/weapps/product/' + e + '/';
			let token = this.sConf.token
			utils.authenticatorRead(host, token).then((res) => {
				console.log('加载产品', res);
				if (res.rescode === 200) {
					this.puctData = res.resmsg;
					this.curPayMoney = res.resmsg.price.price;
					this.curTapMoney = res.resmsg.price.money;
				}
			});
		},
		/**
		 * 直接下单数量变化
		 */
		countChange(e) {
			console.log('countChange', e);
			let c = e < 1 ? 1 : e
			this.curPayMoney = this.puctData.price.price * c
			this.curTapMoney = this.puctData.price.money * c
		},
		/**
		 * 添加到收藏夹
		 */
		favorChange() {
			console.log('favorChange');
			let host = this.sConf.host + '/weapps/favored/'
			let token = this.sConf.token
			let data = {
				sid: this.sConf.auth.id,
				puid: this.puctData.id,
				status: 1
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('切换收藏夹');
				uni.showToast({
					icon: 'success',
					title: '加入收藏夹'
				})
			})
		},
		/**
		 * 加入购物车
		 */
		byCart() {
			console.log('byCart');
			let host = this.sConf.host + '/weapps/cart/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				puid: this.puctData.id,
				pid: this.puctData.pid,
				num: 1,
				status: 1
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('请求成功', res);
				if (res.rescode === 200) {
					uni.showToast({
						icon: 'success',
						title: '加入购物袋'
					})
				}
			});
		},

		/**
		 * 直接下单
		 */
		reqsnChange() {
			console.log('reqsnChange');
			if (!this.staffData.parent) {
				// #ifdef MP-WEIXIN
				wx.vibrateShort();
				// #endif
				uni.showToast({
					icon: 'error',
					title: '下单失败,请加入团购'
				})
				return
			}
			if (!this.curAddress) {
				// #ifdef MP-WEIXIN
				wx.vibrateShort();
				// #endif
				this.warn = true
				uni.showToast({
					icon: 'error',
					title: '请选择收货地址'
				})
				return
			}

			let host = this.sConf.host + '/weapps/newReqsn/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id,
				ads: this.curAddress.id,
				fprice: this.curTapMoney,
				aprice: this.curPayMoney,
				node: this.nodeData,
				products: [{
					cid: this.puctData.id,
					pid: this.puctData.pid,
					fpe: this.puctData.price.money,
					ape: this.puctData.price.price,
					num: this.curPayCount
				}]
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				console.log('提交订单1', res);
				if (res.rescode === 200) {
					return res.resmsg
				} else {
					throw '创建订单失败';
				}
			}).then((res) => {
				console.log('提交订单2', res);
				this.postJsapiOrder(res)
			})
		},
		/**
		 * 创建jsapi订单
		 */
		postJsapiOrder(e) {
			let host = this.sConf.host + '/weapps/postReqsn/';
			let token = this.sConf.token || '';
			let data = {
				reqsn: e.reqsn
			}
			utils.authenticatorPost(host, token, data).then((res) => {
				if (res.rescode === 200) {
					return res.resmsg
				} else {
					throw '创建jsapi失败';
				}
			}).then((res) => {
				console.log('创建jsapi', res);
				utils.requestPayment(res, e.reqsn)
			}).catch((err) => {

			});
		},
		/**
		 * 加载用户收货地址
		 */
		loadStaffAddress() {
			let host = this.sConf.host + '/weapps/address/';
			let token = this.sConf.token || '';
			let data = {
				sid: this.sConf.auth.id
			}
			utils.authenticatorList(host, token, data).then((res) => {
				console.log('加载收货地址', res);
				if (res.rescode === 200) {
					this.addressData = res.resmsg
				}
			});
		},
		/**
		 * 转换地址对象
		 * @param {Object} e
		 */
		convolAddress(e) {
			this.curAddress = this.addressData.find(item => item.id === e)
		},
		/**
		 * 调出收货地址选项框
		 */
		addressChange() {
			console.log('addressChange');
			let tmpData = []
			this.addressData.forEach(item => {
				tmpData.push({
					value: item.id,
					text: this.zipStr(item.name) + ' ' + this.zipStr(item.phone),
					desc: item.address
				})
				console.log('转换数据.');
			})
			this.$refs.actionSheetRef.show({
				actions: tmpData,
				title: '请选择收货信息',
				cancel: () => {
					return true
				},
				select: (index, value) => {
					console.log('选项被点击', index, value)
					this.convolAddress(value)
					this.warn = false
					return true
				}
			})
		},
		/**
		 * 悬浮按钮
		 */
		trigger(e) {
			console.log(e)
		},
		fabClick() {
			console.log('fabClick');
		}
	}
}
</script>

<style lang="scss" scoped>
.buy-price::first-letter {
	font-size: x-large;
}

.warn-address {
	border: 1px solid #dd524d;
}

.toSubmitReqsn {
	background: linear-gradient(135deg, $uni-color-success, $uni-color-banner);
}
</style>